<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Vue.set()的使用</title>
    <script src="../js/vue.js"></script>
  </head>

  <body>
    <div id="root">
      <h1>学校信息</h1>
      <h1>学校名称：{{school.name}}</h1>
      <h1>学校地址：{{school.address}}</h1>
      <h1>校长是：{{school.principal}}</h1>
      <hr />
      {{undefined}}
      <h1>学生信息</h1>
      <button @click="addSex">添加一个性别属性，默认值是男</button>
      <h2>姓名：{{student.name}}</h2>
      <h2 v-if="student.sex">性别：{{student.sex}}</h2>
      <h2>年龄：真实{{student.age.rAge}}，对外{{student.age.sAge}}</h2>
      <h2>朋友们</h2>
      <ul>
        <li v-for="(f,index) in student.friends" :key="index">
          {{f.name}}-{{f.age}}
        </li>
      </ul>
    </div>
  </body>
  <script>
    Vue.config.productionTip = false;

    const vm = new Vue({
      el: "#root",
      data: {
        school: {
          name: "南京财经大学",
          address: "文苑路3号",
        },
        student: {
          name: "jerry",
          age: {
            rAge: 40,
            sAge: 29,
          },
          friends: [
            { name: "tom", age: 35 },
            { name: "jennie", age: 27 },
          ],
        },
      },
      methods: {
        addSex() {
          // Vue.set(this.student, 'sex', '男');
          this.$set(this.student, "sex", "男");
        },
      },
    });

    // [Vue warn]:
    // Avoid adding reactive properties to a Vue instance or its root $data at runtime - declare it upfront in the data option.
    // Vue.set(vm._data, 'principal', '那个男人');
    // Vue.set(vm, 'principal', '那个男人');
    Vue.set(vm.school, "principal", "那个男人");
  </script>
</html>
